<!-- ScaleLoading.vue -->

<template>
    <div class="loading-dots">
      <!-- <div v-for="(dot, index) in dots" :key="index" class="loading-dot" :style="{ animationDelay: `${index * 0.2}s` }"></div> -->
      <div class="loading-dot" :style="{ animationDelay: `${0 * 0.2}s`,backgroundColor:'#F87147' }"></div>
      <div class="loading-dot" :style="{ animationDelay: `${1 * 0.2}s`,backgroundColor: '#F8D247' }"></div>
      <div class="loading-dot" :style="{ animationDelay: `${2 * 0.2}s`,backgroundColor: '#EF2D2D' }"></div>
      <div class="loading-dot" :style="{ animationDelay: `${3 * 0.2}s`,backgroundColor: '#274FF5' }"></div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'BhWaveloading',
    data() {
      return {
        dots: [1, 2, 3, 4] // 根据需要设置点的数量
      };
    }
  };
  </script>
  
  <style>
  .loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50rpx; /* 设置容器的高度 */
  }
  
  .loading-dot {
    width: 13rpx; /* 设置点的宽度 */
    height: 13rpx; /* 设置点的高度 */
    background-color: #3498db; /* 设置点的颜色，可以根据需要调整 */
    border-radius: 50%; /* 设置圆角使其成为圆形 */
    animation: scaleAnimation 1s ease-in-out infinite; /* 应用动画效果，无限循环由小变大 */
    margin: 0 8rpx;
  }
  
  @keyframes scaleAnimation {
    0%, 100% {
      transform: scale(0.5);
    }
    50% {
      transform: scale(1.5); /* 调整最大缩放倍数，可以根据需要调整 */
    }
  }
  </style>
  